<template>
    <div>
        <Banner title='发展历程' flag="history"></Banner>
        <!-- 发展历程文本区域  START -->
        <div class="container history_container">
            <div class="row">
                <div class="col-lg-12">
                    <ul>
                        <li class="wow animate__animated animate__fadeInUp" data-wow-duration="1.5s" data-wow-delay="0.1s"
                            v-for="(item, index) in historyList" :key="index">
                            <h3>{{ item.title }}</h3>
                            <p v-for="(i, index) in item.paratextList" :key="index">{{ i.text }}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 发展历程文本区域  END -->
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import WOW from 'wow.js'// 在vue3中下载的是wow.js|vue2中是wowjs
let historyList = ref([
    {
        id: 1,
        title: '2009年 —— 昨非成立',
        paratextList: [
            { id: 1, text: '生物实验/检测相关产品销售；' },
            { id: 2, text: '国内外知名设备、试剂、耗材代理，销售。' }
        ]
    },
    {
        id: 2,
        title: '2020年 —— 昨非转型',
        paratextList: [
            { id: 1, text: '转做国产品牌设备、试剂、耗材代理，销售；' },
            { id: 2, text: '组建研发和生产团队,开启集研发、生产、销售和服务的综合性企业的征程。' }
        ]
    },
    {
        id: 3,
        title: '2022年 —— 昨非发展',
        paratextList: [
            { id: 1, text: '研发/生产团队扩增到16人,其中有日本2项个人专利，十数年日本汽车制造/技术经验的管理人员，先后获得29项专利的高级机械设计工程师，取得过8项专利的软件工程师，生物实验行业翘楚（Tecan，Hamilton等）;' }
        ]
    },
    {
        id: 4,
        title: 'FUTURE —— 昨非未来',
        paratextList: [
            { id: 1, text: '自主肩负国产仪器发扬使命，为国产仪器的发展增光添彩，为祖国的科学事业添砖加瓦。' }
        ]
    }
])

onMounted(() => {
    //初始化wow.js(页面滚动加载动画)
    nextTick(() => {   //页面渲染完，在执行
        new WOW().init()
    })
});
</script>

<style scoped lang="scss">
.history_container {
    margin-top: 80px;
    margin-bottom: 50px;

    li {
        font-family: "Source Han Sans CN";
        text-align: center;
        border-bottom: 1px solid #ddd;
        padding: 0px 20px 30px;
        margin-bottom: 50px;

        h3 {
            font-size: 20px;
            font-weight: 400px;
            color: #4F68AC;
            margin-bottom: 15px;
        }

        p {
            font-size: 15px;
            color: #999;
            line-height: 24px;
        }
    }
}
</style>